<template>
  <div class="logs-panel">
    <h2 class="panel-title">DDNS 更新日志</h2>
    
    <div class="filter-controls">
      <label>
        显示条数:
        <select v-model="logCount" @change="fetchLogs">
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="50">50</option>
          <option value="100">100</option>
        </select>
      </label>
      
      <label>
        IP版本:
        <select v-model="ipVersionFilter">
          <option value="">全部</option>
          <option value="ipv4">IPv4</option>
          <option value="ipv6">IPv6</option>
        </select>
      </label>
      
      <label>
        <input type="checkbox" v-model="showOnlyChanges"> 仅显示IP变化记录
      </label>
    </div>
    
    <div class="logs-table-container">
      <table class="logs-table">
        <thead>
          <tr>
            <th>时间</th>
            <th>IP版本</th>
            <th>域名</th>
            <th>原IP</th>
            <th>新IP</th>
            <th>状态</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(log, index) in filteredLogs" :key="index" :class="{ 'has-error': !log.success, 'has-change': log.changed }">
            <td>{{ formatTime(log.timestamp) }}</td>
            <td>{{ log.ip_version.toUpperCase() }}</td>
            <td>{{ log.domains.join(', ') }}</td>
            <td>{{ log.previous_ip || '-' }}</td>
            <td>{{ log.current_ip || '-' }}</td>
            <td>
              <span v-if="log.success && log.changed" class="status-updated">已更新</span>
              <span v-else-if="log.success && !log.changed" class="status-unchanged">未变化</span>
              <span v-else class="status-failed" :title="log.error_message">失败</span>
            </td>
          </tr>
          <tr v-if="filteredLogs.length === 0">
            <td colspan="6" class="no-data">暂无日志数据</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <div class="refresh-controls">
      <button @click="fetchLogs" class="refresh-button">刷新日志</button>
      <span v-if="lastRefreshed" class="last-refreshed">
        上次刷新: {{ formatTime(lastRefreshed) }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logs: [],
      logCount: 20,
      ipVersionFilter: '',
      showOnlyChanges: false,
      lastRefreshed: null,
      loading: false
    }
  },
  
  computed: {
    filteredLogs() {
      return this.logs.filter(log => {
        // 过滤IP版本
        if (this.ipVersionFilter && log.ip_version !== this.ipVersionFilter) {
          return false;
        }
        
        // 过滤是否变化
        if (this.showOnlyChanges && !log.changed) {
          return false;
        }
        
        return true;
      });
    }
  },
  
  mounted() {
    this.fetchLogs();
    // 每60秒自动刷新一次
    this.refreshInterval = setInterval(this.fetchLogs, 60000);
  },
  
  beforeUnmount() {
    clearInterval(this.refreshInterval);
  },
  
  methods: {
    async fetchLogs() {
      this.loading = true;
      try {
        const response = await fetch(`/api/logs?count=${this.logCount}`);
        if (response.ok) {
          const data = await response.json();
          if (data.success && data.data) {
            this.logs = data.data;
          }
          this.lastRefreshed = new Date();
        } else {
          console.error('获取日志失败:', response.statusText);
        }
      } catch (error) {
        console.error('获取日志错误:', error);
      } finally {
        this.loading = false;
      }
    },
    
    formatTime(timestamp) {
      if (!timestamp) return '-';
      const date = new Date(timestamp);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      });
    }
  }
}
</script>

<style scoped>
.logs-panel {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.panel-title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: 1.5rem;
  color: #333;
}

.filter-controls {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  align-items: center;
}

.filter-controls label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.logs-table-container {
  overflow-x: auto;
  margin-bottom: 1rem;
}

.logs-table {
  width: 100%;
  border-collapse: collapse;
}

.logs-table th, .logs-table td {
  padding: 0.75rem;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.logs-table th {
  font-weight: 600;
  background-color: #f7f7f7;
}

.has-error {
  background-color: #fff6f6;
}

.has-change {
  background-color: #f6fbff;
}

.status-updated {
  color: #4caf50;
  font-weight: 500;
}

.status-unchanged {
  color: #9e9e9e;
}

.status-failed {
  color: #f44336;
  font-weight: 500;
  cursor: help;
}

.no-data {
  text-align: center;
  color: #757575;
  padding: 2rem 0;
}

.refresh-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.refresh-button {
  padding: 0.5rem 1rem;
  background-color: #f0f0f0;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.refresh-button:hover {
  background-color: #e0e0e0;
}

.last-refreshed {
  color: #757575;
  font-size: 0.875rem;
}
</style> 